<template>
  <iep-dialog
    title="请使用微信支付"
    :dialogShow="dialogShow"
    @close="_close()"
    width="400px"
  >
    <!-- <iep-img :src="img"></iep-img> -->
    <div id="flow-img"></div>
  </iep-dialog>
</template>
<script>
let payOut = null
export default {
  data () {
    return {
      dialogShow: false,
      img: ''
    }
  },
  methods: {
    open (number) {
      this.dialogShow = true
      // wechat/wx_pay
      this.$http({
        url: this.$http.adornUrl('wechat/wx_pay'),
        method: 'GET',
        params: {
          orderNumber: number
        },
        responseType: 'blob'
      }).then(({ data }) => {
        var img = document.createElement('img')
        const myBlob = new window.Blob([data], {type: 'image/jpeg'})
        const qrUrl = window.URL.createObjectURL(myBlob)
        console.log('qrUrl: ', qrUrl)
        img.src = qrUrl
        img.onload = function () {
          window.URL.revokeObjectURL(qrUrl)
        }
        const imgDiv = document.querySelector('#flow-img')
        imgDiv.appendChild(img)
        payOut = setInterval(() => {
          this.$http({
            url: this.$http.adornUrl('wechat/if_pay'),
            method: 'GET',
            params: {
              orderNumber: number
            }
          }).then(({ data }) => {
            if (data.data) {
              this.close()
              this.$router.push(`/order-detail/${number}`)
            }
          })
        }, 3000)
      })
    },
    _close () {
      this.dialogShow = false
      clearInterval(payOut)
    },
    close () {
      this._close()
      this.$emit('load-page')
    }
  }
}
</script>
